<!--  -->
<template>
    <div class="card-container">
        <div class="card-header">
            <order-status-bar

                :orderDetial="orderDetial">

            </order-status-bar>

        </div>
        <van-divider style="margin: 0px" />
        <div class="card-content">
            <div class="content-item">
                <div class="content-item-label">{{$st('Maintenance_repair_time')}}</div>
                <div class="content-item-text">{{  momentDateTime(orderDetial.createtime)  }}</div>
            </div>
            <div class="content-item">
                <div class="content-item-label">{{$st('Problem_description')}}</div>
                <div class="content-item-text">{{ orderDetial.content || '--' }}</div>
            </div>
            <!-- 图片 -->
            <div
                class="content-attach-item"
                v-if="images&&images.length>0">
                <div class="content-item-label ">{{$st('Pictures')}}</div>
                <van-grid
                    class="image-item"
                    square
                    :gutter="12"
                    :border="false"
                    :column-num="4">
                    <van-grid-item
                        v-for="(img, index) in images"
                        :key="index"
                    >
                        <van-image
                            @click="onShowImages(index)"
                            class="order-image"
                            :alt="img.filename"
                            :src="img.fileurl"
                            fit="scale-down"
                            width="70px"
                            height="70px"

                        />
                    </van-grid-item>

                </van-grid>
            </div>
            <div
                class="content-item"
                v-else>
                <div class="content-item-label">{{$st('Pictures')}}</div>
                <div class="content-item-text">{{$st('wp_No_picture_yet')}}</div>
            </div>
            <!-- 附件 -->
            <div
                class="content-attach-item"
                v-if="otherFiles&&otherFiles.length>0">
                <div class="content-item-label">{{$st('attachment')}}</div>
                <div>
                    <file-bar
                        class="filebar"
                        :file="file"
                        v-for="(file, index) in otherFiles"
                        :key="index"
                    >
                    </file-bar>
                </div>
            </div>
            <div
                class="content-item"
                v-else>
                <div class="content-item-label">{{$st('attachment')}}</div>
                <div class="content-item-text">{{$st('No_attachments')}}</div>
            </div>
            <van-divider style="margin: 0px" />
            <div class="content-item">
                <div class="content-item-label">{{'报修人'}}</div>
                <div class="content-item-text van-ellipsis">{{ orderDetial.name || '--' }}</div>
                <collapse-button
                    class="spaceholder"
                    v-model:isExpand="isExpandCustomerInfo"
                ></collapse-button>
            </div>
            <div class="content-item">
                <div class="content-item-label">{{$st('phone')}}</div>
                <div class="content-item-text van-ellipsis">{{ orderDetial.phone || '--' }}</div>
                <div   class="spaceholder"></div>
            </div>
            <div class="content-item">
                <div class="content-item-label">{{'公司名称'}}</div>
                <div class="content-item-text van-multi-ellipsis--l2">{{ orderDetial.company || '--' }}</div>
                <div   class="spaceholder"></div>
            </div>
            <div
                class="content-item"
                v-if="isExpandCustomerInfo">
                <div class="content-item-label">{{$st('contact_address')}}</div>
                <div class="content-item-text ">{{ orderDetial.address || '--' }}</div>
            </div>
            <div
                class="content-item"
                v-if="isExpandCustomerInfo">
                <div class="content-item-label">{{$st('email')}}</div>
                <div class="content-item-text">{{ orderDetial.email || '--' }}</div>
            </div>
            <!-- <div
                class="content-item"
                v-if="isExpandCustomerInfo">
                <div class="content-item-label">{{'设备号'}}</div>
                <div class="content-item-text">{{ orderDetial.uuid || '--' }}</div>
            </div> -->
            <div
                class="content-item"
                v-if="isExpandCustomerInfo">
                <div class="content-item-label">{{$st('wp_Device_Factory_Number')}}</div>
                <div class="content-item-text">{{ orderDetial.manufacturecode || '--' }}</div>
            </div>
            <div
                class="content-item"
                v-if="isExpandCustomerInfo">
                <div class="content-item-label">{{$st('chan-pin-xing-hao')}}</div>
                <div class="content-item-text">{{ orderDetial.model || '--' }}</div>
            </div>
            <div
                class="content-item"
                v-if="isExpandCustomerInfo">
                <div class="content-item-label">{{$st('Agent')}}</div>
                <div class="content-item-text">{{ orderDetial.agent || '--' }}</div>
            </div>
            <div
                class="content-item"
                v-if="isExpandCustomerInfo">
                <div class="content-item-label">{{$st('wp_privacy_setting')}}</div>
                <div class="content-item-text">
                    {{
                        orderDetial.allowviewbymanucode?  $st('wp_Allow_to_query_this_repair_request_via_factory_number_of_this_equipment'):"--"
                    }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, computed } from 'vue';
import FileBar from '@/components/_common/FileBar.vue';
import CollapseButton from '@/components/_common/CollapseButton.vue';
import OrderStatusBar from '@/components/maintenance_control/common/OrderStatusBar.vue';
import { ImagePreview } from 'vant';
import moment from 'moment';
export default {
    name: '',
    components: {
        FileBar,
        CollapseButton,
        OrderStatusBar
    },
    props: {
        orderDetial: Object
    },
    setup (props) {
        const imgExt = ['.png', '.jpg', '.bmp', '.jpeg', '.svg'];
        const state = reactive({
            isExpandCustomerInfo: false
        });

        const images = computed(() => {
            const files = props.orderDetial.attachments || [];
            return files.filter(
                (f) =>
                    imgExt.indexOf(f.filename.substring(f.filename.lastIndexOf('.')).toLowerCase()) >= 0
            );
        });
        const otherFiles = computed(() => {
            const files = props.orderDetial.attachments || [];
            return files.filter(
                (f) =>
                    imgExt.indexOf(f.filename.substring(f.filename.lastIndexOf('.')).toLowerCase()) < 0
            );
        });
        const onShowImages = (index) => {
            ImagePreview({
                images: images.value.map(item => {
                    return item.fileurl;
                }),
                startPosition: index

            });
        };
        const momentDateTime = (date) => moment(date).format('YYYY-MM-DD HH:mm:ss');
        onBeforeMount(() => {
            // 图像文件
        });
        onMounted(() => {});
        const refData = toRefs(state);
        return {
            onShowImages,
            images,
            otherFiles,
            momentDateTime,
            ...refData
        };
    }
};
</script>
<style lang='scss' scoped>
.card-container {
  border-radius: 10px;
  background-color: white;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  .card-header {
    padding: 0px 15px 0px 15px;
}
.card-content {
  padding: 15px;
}
.content-item {
  width: 100%;
  display: flex;
  align-items: center;

  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 13px;
}
.content-item-label {
  text-align: left;
  min-width: 100px;
  width: 20%;
  color: rgba(0, 0, 0, 0.6);
}
.image-item{
   padding-top:  10px;
}
.spaceholder{

    min-width: 40px;
}
.content-attach-item {
  padding-top: 5px;
  padding-bottom: 5px;
  //margin-left: 15px;
}

.order-image {
  opacity: 1;
  border: 1px solid #f5f5f5;
  border-radius: 4px;
}

.content-item-text {
    flex-grow: 1;
    font-weight: 400;
    text-align: left;
    line-height: 20px;
    color: #000000;
    margin-right: 5px;
    word-wrap: break-word;
    word-break:break-word;
    //width: calc(100% - 120px);
}
.filebar {
  margin-top: 5px;
  margin-bottom: 5px;
}
}

</style>
